<template>
  <div>
    <el-dialog v-model="allEventsDialogVisible" title="所有事件列表" draggable width="60%">
      <el-table :data="allEventsData" border height="300" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="id_" label="FID" width="50" />
        <el-table-column prop="事件编号" label="事件编号" width="140" />
        <el-table-column prop="事件类型" label="事件类型" width="85" />
        <el-table-column prop="事件等级" label="事件等级" width="85" />
        <el-table-column prop="发生时间" label="发生时间" width="140" />
        <el-table-column prop="发生地点" label="发生地点" width="85" />
        <el-table-column prop="车牌号" label="车牌号" width="90" />
        <el-table-column prop="驾驶员" label="驾驶员" width="70" />
        <el-table-column prop="处理状态" label="处理状态" width="85" />
      </el-table>
      <!-- 分页显示 -->
      <el-pagination
        background
        small
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="allEvents.length"
      />

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="allEventsDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="EventStatisticsChart"> 所有事件统计图 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="EventsChartDialogVisible" title="所有事件统计图" draggable width="400">
      <!-- <AreaChart :data="areaData" :config="areaConfig" /> -->
      <PieChart :data="chartData" v-bind="config" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useDialog } from '@/stores/dialogSwitch.js'
import { storeToRefs } from 'pinia'
// 引入pinia的事件信息
import { useDialogEvents } from '@/stores/dialogEvents.js'
import { useDealwithChartData } from '@/views/Home/Dialog/QueryEvent/Hooks/useDealwithChartData'
import { LineChart, PieChart, RoseChart, AreaChart } from '@opd/g2plot-vue'
const { allEvents } = storeToRefs(useDialogEvents())
// 所有事件列表开关
const { allEventsDialogVisible } = storeToRefs(useDialog())
// 当前页数&&每页显示的数据数目&&offset
const currentPage = ref(1)
const pageSize = ref(5)
const offset = ref(0)
// 筛选符合条件的 所有事件信息
const allEventsData = computed(() => {
  offset.value = (currentPage.value - 1) * pageSize.value
  // console.log(`一页的数据量: ${pageSize.value}`)
  // console.log(`当前页: ${currentPage.value}`)
  // console.log(offset.value)
  let eventData = allEvents.value.map((item) => {
    const obj = item.values_.values_
    obj.id_ = item.id_
    return obj
  })
  let updateEventData = eventData.filter((item, index) => {
    return index >= offset.value && index < offset.value + pageSize.value
  })
  return updateEventData
})

const EventsChartDialogVisible = ref(false)
// 定义事件统计图数据
let chartData
let areaData
const EventStatisticsChart = () => {
  // 清空统计数据
  chartData = []
  areaData = []
  EventsChartDialogVisible.value = true
  chartData = useDealwithChartData()
}

let config = {
  appendPadding: 10,
  chartData,
  angleField: 'total',
  colorField: 'type',
  radius: 0.9,
  label: {
    type: 'inner',
    offset: '-30%',
    content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
    style: {
      fontSize: 14,
      textAlign: 'center'
    }
  },
  interactions: [{ type: 'element-active' }]
}
let areaConfig = {
  height: 350,
  autoFit: true,
  xField: 'year',
  yField: 'value',
  smooth: true,
  meta: {
    value: {
      max: 20
    }
  }
}
</script>

<style scoped>
.el-pagination {
  margin-top: 10px;
}

:deep(.el-dialog) {
  height: 70%;
}
</style>
